<template>
  <div class="banner">
    <el-carousel
      :interval="4000"
      :type="isMobile ? '' : 'card'"
      v-if="list.length > 0"
      :arrow="isMobile ? 'always' : 'hover'"
    >
      <el-carousel-item v-for="item of list" :key="item.imgUrl">
        <a :href="item.jumpUrl" target="_blank">
          <el-image :src="item.imgUrl" fit="fill"></el-image>
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      //数据载入动画
      fullscreenLoading: false,
    };
  },
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  mounted() {
    this.getBanner();
  },
  methods: {
    //获取专辑列表
    async getBanner() {
      this.fullscreenLoading = true;
      try {
        let res = await this.$api.home.getBanner({});
        this.fullscreenLoading = false;
        if (res.code === 1000000) {
          this.list = res.source
            ? this.utils.processingData(this.list, res.source)
            : [];
        } else {
          this.$message({
            message: res.data,
            showClose: true,
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  .el-carousel__container {
    .el-carousel__item {
      .el-image {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
